<template>
	<view class="tarot-container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="star" v-for="(star, index) in stars" :key="index" 
				:style="{left: star.left, top: star.top, animationDelay: star.delay}"></view>
		</view>
		
		<!-- 标题区域 -->
		<view class="header">
			<text class="title">塔罗占卜</text>
			<text class="subtitle">扇形展开 · 探索命运的指引</text>
		</view>
		
		<!-- 卡牌区域 -->
		<view class="cards-area">
			<!-- 粒子效果 -->
			<view class="particles-container" v-if="shuffling">
				<view v-for="(p, i) in particles" :key="p.id" 
					class="magic-particle"
					:style="{
						left: '50%',
						top: '50%',
						marginLeft: p.x + 'px',
						marginTop: p.y + 'px',
						'--tx': p.tx + 'px',
						'--ty': p.ty + 'px',
						'--c': p.color
					}">
				</view>
			</view>

			<!-- 洗牌状态 - 卡牌堆叠（优化版） -->
			<view v-if="!expanded" class="card-stack" :class="{'shuffling': shuffling}">
				<view class="card card-back stack-card" 
					v-for="(card, index) in displayCards" 
					v-show="!shuffling || card.visible"
					:key="'stack-' + index"
					:style="{
						transform: shuffling ? 
							`translate3d(${card.shuffleX}px, ${card.shuffleY}px, ${card.shuffleZ}px) rotateZ(${card.shuffleRotate}deg) scale(${card.scale})` 
							: `translate3d(${index * 0.5}px, ${-index * 0.5}px, ${index * 0.2}px) rotate(0deg)`,
						zIndex: shuffling ? Math.floor(card.shuffleZ + 100) : index,
						boxShadow: shuffling ? '' : '-2px 2px 5px rgba(0,0,0,0.3)',
						transition: shuffling ? 'none' : 'transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
						willChange: shuffling ? 'transform' : 'auto'
					}">
					<view class="card-pattern"></view>
				</view>
			</view>
			
			<!-- 展开状态 - 螺旋排列 -->
			<!-- 展开状态 - 银河螺旋排列 -->
			<view v-else class="galaxy-container"
				:style="{ transform: `rotate(${spiralRotation}deg)` }"
				@touchstart="handleTouchStart"
				@touchmove.stop.prevent="handleTouchMove"
				@touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd"
			>
				<view 
					v-for="(card, index) in displayCards"  
					:key="'galaxy-' + card.id + '-' + index"
					class="card"
					:class="{
						'card-selected': card.selected
					}"
					:style="getSpiralStyle(index, card)"
					@click="selectCard(index)">
					
					<view class="card-inner" :class="{ 'is-flipped': card.flipped }">
						<!-- 卡牌背面 -->
						<view class="card-face card-back-face card-back">
							<view class="card-content card-back-content">
								<view class="card-pattern"></view>
								<text class="card-back-text">TAROT</text>
							</view>
						</view>
						
						<!-- 卡牌正面 -->
						<view class="card-face card-front-face card-front">
							<view class="card-content card-front-content">
								<image 
									:src="card.image_url" 
									mode="aspectFit" 
									class="card-img"
									:style="{transform: card.is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			

		</view>
		
		<!-- 操作按钮 -->
		<view class="action-area">
			<button 
				v-if="!shuffling && !expanded" 
				class="action-btn shuffle-btn" 
				@click="startShuffle">
				<text class="btn-icon">🔮</text>
				<text>开始洗牌</text>
			</button>
			
			<view v-if="shuffling" class="shuffling-text">
				<text>洗牌中...</text>
			</view>
		</view>
		
		<!-- 选中的卡牌提示 -->
		<view v-if="expanded && selectedCards.length === 0" class="hint-text">
			<text>请凭直觉选择一张牌</text>
		</view>
		
		<!-- 卡牌预览遮罩层 -->
		<view v-if="selectedCards.length === 1 && !showResult" class="card-preview-modal" @click="reselect">
			<view class="preview-content" @click.stop="confirmSelection">
				<text class="preview-title">您选择的牌</text>
				<!-- 显示选中卡牌的背面 -->
				<view class="preview-card card card-back">
					<view class="card-content card-back-content">
						<view class="card-pattern"></view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 结果弹窗 -->
		<view v-if="showResult" class="result-modal" @click="closeResult">
			<view class="result-content" @click.stop>
				<text class="result-title">✨ 抽卡结果 ✨</text>
				<view class="result-cards">
					<view v-for="(card, index) in selectedCardData" :key="index" class="result-card-item">
						<text class="result-card-position">{{ cardDetail.name_cn }} {{ card.is_up === 1 ? '(正位)' : '(逆位)' }}</text>
						<image 
							:src="card.image_url" 
							mode="aspectFit" 
							class="result-card-img"
							:style="{transform: card.is_up === 2 ? 'rotate(180deg)' : 'rotate(0deg)'}"
						></image>
						<text class="result-card-description">{{ cardDetail.meaning_cn }}</text>
					</view>
				</view>
				<button class="close-btn" @click="closeResult">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
import { tarotCards } from '../tarot-b/tarot-data.js';
import { buildApiUrl, TAROT_API } from '@/config/api.js';

export default {
	data() {
		return {
			shuffling: false,
			expanded: false,
			showResult: false,
			selectedCards: [],
			displayCards: [],
			particles: [],
			stars: [],
			// 塔罗牌数据
			tarotCards: tarotCards,
			// 卡牌详情数据
			cardDetail: {
				name_cn: '命运指引',
				meaning_cn: '走出低谷、恢复力量'
			},
			// 加载状态
			loadingDetail: false,
			// 螺旋拖拽相关
			spiralRotation: 0,
			isDragging: false,
			lastTouchX: 0,
			lastTime: 0,
			velocity: 0,
			inertiaFrame: null,
			friction: 0.95
		}
	},
	computed: {
		selectedCardData() {
			return this.selectedCards.map(index => this.displayCards[index]);
		}
	},
	onLoad() {
		this.initStars();
		this.initCards();
	},
	onUnload() {
		if (this.inertiaFrame) {
			cancelAnimationFrame(this.inertiaFrame);
		}
	},
	methods: {
		// 初始化星星背景
		initStars() {
			for (let i = 0; i < 50; i++) {
				this.stars.push({
					left: Math.random() * 100 + '%',
					top: Math.random() * 100 + '%',
					delay: Math.random() * 3 + 's'
				});
			}
		},
		
		// 初始化卡牌
		initCards() {
			// 使用导入的78张牌数据
			const shuffled = [...this.tarotCards].sort(() => Math.random() - 0.5);
			
			this.displayCards = shuffled.map((card, index) => ({
				...card,
				flipped: false,
				selected: false,
				shuffleRotate: 0,
				shuffleX: 0,
				shuffleY: 0,
				shuffleZ: 0,
				scale: 1,
				visible: index < 20 // 优化：只显示前20张卡牌
			}));
		},
		
		// 开始洗牌
		startShuffle() {
			if (this.shuffling) return;
			
			// 重置旋转角度
			this.spiralRotation = 0;
			if (this.inertiaFrame) {
				cancelAnimationFrame(this.inertiaFrame);
				this.inertiaFrame = null;
			}
			
			console.log('开始洗牌动画');
			this.shuffling = true;
			
			// 优化：减少到20张卡牌
			const visibleCount = Math.min(20, this.displayCards.length);
			
			// 确保前20张卡牌可见
			for (let i = 0; i < visibleCount; i++) {
				this.displayCards[i].visible = true;
			}
			
			let step = 0;
			let animationFrame = null;
			let animationTimer = null;
			let lastTime = Date.now();
			const frameInterval = 100; // 优化：降低更新频率到100ms (10fps)
			
			// 动画更新逻辑（深度优化版）
			const updateAnimation = () => {
				const currentTime = Date.now();
				const deltaTime = currentTime - lastTime;
				
				if (deltaTime >= frameInterval) {
					step++;
					const time = currentTime / 1000;
					
					// 减少粒子生成频率
					if (step % 4 === 0) this.createParticles(1);
					
					// 预计算常用值，减少重复计算
					const speed = 2.5;
					const timeSpeed = time * speed;
					const timeScale = time * 3;
					
					// 优化：直接修改属性，避免$set触发响应式更新
					// 只在最后一次更新时触发一次视图更新
					for (let index = 0; index < visibleCount; index++) {
						const card = this.displayCards[index];
						const offset = index * 1.5;
						const timeOffset = timeSpeed + offset;
						
						// 预计算三角函数值
						const sinValue = Math.sin(timeOffset);
						const cosValue = Math.cos(timeOffset);
						const scaleValue = Math.sin(timeScale + index);
						
						// 直接修改属性，避免创建新对象
						card.visible = true;
						card.shuffleRotate = sinValue * 180;
						card.shuffleX = cosValue * 100;
						card.shuffleY = sinValue * 100;
						card.shuffleZ = sinValue * 80;
						card.scale = 0.95 + scaleValue * 0.05;
					}
					
					// 强制触发一次视图更新（批量更新）
					this.$forceUpdate();
					
					lastTime = currentTime;
				}
				
				// 检查是否继续动画
				return this.shuffling && step < 30; // 约3秒 (30 * 100ms)
			};
			
			// 检测requestAnimationFrame是否可用
			const hasRAF = typeof requestAnimationFrame === 'function';
			
			if (hasRAF) {
				// 方案1: 使用requestAnimationFrame（性能更好）
				console.log('使用requestAnimationFrame动画');
				
				const animate = () => {
					updateAnimation();
					
					// 继续动画循环
					if (this.shuffling && step < 30) {
						animationFrame = requestAnimationFrame(animate);
					} else {
						console.log('洗牌动画结束，step:', step);
						this.stopShuffle();
					}
				};
				
				// 启动动画
				animationFrame = requestAnimationFrame(animate);
				
			} else {
				// 方案2: 使用setInterval降级方案（兼容性更好）
				console.log('使用setInterval动画（降级方案）');
				
				animationTimer = setInterval(() => {
					const shouldContinue = updateAnimation();
					
					// 检查是否需要停止
					if (!shouldContinue) {
						clearInterval(animationTimer);
						console.log('洗牌动画结束，step:', step);
						this.stopShuffle();
					}
				}, frameInterval);
			}
			
			// 保存定时器引用，用于清理
			this.animationTimer = animationTimer;
			this.animationFrame = animationFrame;
		},
			
		
		// 停止洗牌动画
		stopShuffle() {
			// 清理动画定时器和动画帧
			if (this.animationTimer) {
				clearInterval(this.animationTimer);
				this.animationTimer = null;
				console.log('已清理setInterval定时器');
			}
			
			if (this.animationFrame && typeof cancelAnimationFrame === 'function') {
				cancelAnimationFrame(this.animationFrame);
				this.animationFrame = null;
				console.log('已清理requestAnimationFrame');
			}
			
			this.particles = []; // 清除粒子
			
			// 归位动画 - 使用索引直接修改
			for (let i = 0; i < this.displayCards.length; i++) {
				const card = this.displayCards[i];
				this.$set(this.displayCards, i, {
					...card,
					shuffleRotate: 0,
					shuffleX: 0,
					shuffleY: 0,
					shuffleZ: 0,
					scale: 1,
					visible: true // 展开时显示所有卡牌
				});
			}
			
			setTimeout(() => {
				this.shuffling = false;
				this.displayCards = this.displayCards.slice(0, 78);
				setTimeout(() => {
					this.expanded = true;
				}, 300);
			}, 500);
		},

		// 创建粒子（优化版）
		createParticles(count) {
			for(let i=0; i<count; i++) {
				this.particles.push({
					id: Date.now() + Math.random(),
					x: (Math.random() - 0.5) * 150,
					y: (Math.random() - 0.5) * 150,
					tx: (Math.random() - 0.5) * 250,
					ty: (Math.random() - 0.5) * 250,
					color: Math.random() > 0.6 ? '#FFD700' : '#B8A9D4'
				});
			}
			// 减少粒子数量上限
			if (this.particles.length > 20) {
				this.particles = this.particles.slice(-20);
			}
		},
		
		// 拖拽交互处理
		handleTouchStart(e) {
			if (!this.expanded) return;
			this.isDragging = true;
			// 兼容不同平台的触摸事件获取方式
			const touch = e.touches ? e.touches[0] : e.changedTouches[0];
			this.lastTouchX = touch.clientX;
			this.lastTime = Date.now();
			this.velocity = 0;
			
			if (this.inertiaFrame) {
				cancelAnimationFrame(this.inertiaFrame);
				this.inertiaFrame = null;
			}
		},

		handleTouchMove(e) {
			if (!this.expanded || !this.isDragging) return;
			
			const touch = e.touches ? e.touches[0] : e.changedTouches[0];
			const clientX = touch.clientX;
			const now = Date.now();
			const deltaTime = now - this.lastTime;
			const deltaX = clientX - this.lastTouchX;
			
			// 更新旋转角度 (0.5 为灵敏度系数) - 反向旋转
			this.spiralRotation -= deltaX * 0.5;
			
			// 计算速度用于惯性 (简单的低通滤波)
			if (deltaTime > 0) {
				const v = deltaX / deltaTime;
				this.velocity = this.velocity * 0.8 + v * 0.2;
			}
			
			this.lastTouchX = clientX;
			this.lastTime = now;
		},

		handleTouchEnd() {
			if (!this.expanded) return;
			this.isDragging = false;
			
			// 触发惯性效果
			if (Math.abs(this.velocity) > 0.1) {
				this.applyInertia();
			}
		},

		applyInertia() {
			const update = () => {
				if (this.isDragging) return;
				
				// 减速摩擦
				this.velocity *= this.friction;
				
				// 更新角度 (假设60fps，约16ms) - 保持方向一致
				this.spiralRotation -= this.velocity * 16;
				
				// 速度足够小则停止
				if (Math.abs(this.velocity) > 0.01) {
					this.inertiaFrame = requestAnimationFrame(update);
				} else {
					this.inertiaFrame = null;
				}
			};
			this.inertiaFrame = requestAnimationFrame(update);
		},

		// 计算螺旋/银河排列样式
		getSpiralStyle(index, card) {
			if (card.selected) {
				// 选中状态：卡牌保持在原位，但完全隐藏（因为会在遮罩层中显示）
				const spread = 18;
				const angleStep = 137.508;
				const r = spread * Math.sqrt(index + 3);
				const theta = index * angleStep;
				const x = r * Math.cos(theta * Math.PI / 180);
				const y = r * Math.sin(theta * Math.PI / 180);
				
				return {
					transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${theta}deg) scale(0.5)`,
					zIndex: -1, // 降低层级，确保在最底层
					left: '50%',
					top: '50%',
					opacity: 0, // 完全透明
					visibility: 'hidden', // 隐藏元素，防止闪现
					pointerEvents: 'none', // 禁用鼠标事件
					transition: 'none' // 移除过渡效果，立即隐藏
				};
			}
			
			// 银河/向日葵布局 (Phyllotaxis)
			// 使得78张牌均匀分布在圆形区域内
			
			// 调整参数以适应屏幕
			const spread = 18; // 扩散系数，控制整体大小
			const angleStep = 137.508; // 黄金角度
			
			// 计算极坐标
			// sqrt(index) 保证面积均匀分布
			const r = spread * Math.sqrt(index + 3); 
			const theta = index * angleStep;
			
			// 转换为笛卡尔坐标 (相对于中心)
			const x = r * Math.cos(theta * Math.PI / 180);
			const y = r * Math.sin(theta * Math.PI / 180);
			
			return {
				// 先居中，再偏移，再旋转，最后缩放
				transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(${theta}deg) scale(0.5)`,
				zIndex: 100 - index, // 外层在下，内层在上，或者反过来都可以
				left: '50%',
				top: '50%',
				transitionDelay: `${index * 0.005}s`
			};
		},
		
		// 选择卡牌
		selectCard(index) {
			if (!this.expanded || this.displayCards[index].selected) return;
			if (this.selectedCards.length >= 1) return; // 只允许选一张
			
			// 随机生成正逆位状态：1=正位，2=逆位
			const isUp = Math.random() < 0.5 ? 1 : 2;
			
			// 1. 先更新基本选中状态
			this.$set(this.displayCards[index], 'selected', true);
			this.$set(this.displayCards[index], 'is_up', isUp);
			
			// 2. 触发翻转动画 (状态同步：flipped = true)
			// 使用 setTimeout 确保渲染周期正确，虽然直接设置通常也行
			setTimeout(() => {
				this.$set(this.displayCards[index], 'flipped', true);
			}, 50);
			
			console.log('选中卡牌，正逆位:', isUp === 1 ? '正位' : '逆位');
			
			// 3. 延迟后续流程，等待翻转动画完成
			setTimeout(() => {
				this.selectedCards.push(index);
			}, 800); // 800ms 对应 CSS transition-duration
		},
		
		// 确认选择
		async confirmSelection() {
			if (this.selectedCards.length !== 1) return;
			
			const index = this.selectedCards[0];
			const selectedCard = this.displayCards[index];
			
			// 翻转卡牌
			this.$set(this.displayCards[index], 'flipped', true);
			
			// 获取卡牌详情
			await this.fetchCardDetail(selectedCard.id);
			
			// 显示结果
			setTimeout(() => {
				this.showResult = true;
			}, 600);
		},
		
		// 获取卡牌详情
		async fetchCardDetail(cardId) {
			this.loadingDetail = true;
			
			// 获取选中卡牌的正逆位状态
			const index = this.selectedCards[0];
			const isUp = this.displayCards[index].is_up || 1;
			
			try {
				const url = buildApiUrl(TAROT_API.getInfo);
				console.log('正在获取卡牌详情:', cardId, '正逆位:', isUp === 1 ? '正位' : '逆位', url);
				
				const response = await uni.request({
					url: url,
					method: 'GET',
					data: {
						id: cardId,
						is_up: isUp
					},
					timeout: 10000
				});
				
				// 检查HTTP状态
				if (response.statusCode !== 200) {
					throw new Error(`HTTP错误: ${response.statusCode}`);
				}
				
				const data = response.data;
				
				// 检查业务状态码
				if (data.code !== 1) {
					throw new Error(data.msg || '获取卡牌详情失败');
				}
				
				// 验证数据结构
				if (!data.data || !data.data.name_cn) {
					throw new Error('数据格式错误');
				}
				
				// 更新卡牌详情
				this.cardDetail = {
					name_cn: data.data.name_cn || '命运指引',
					meaning_cn: data.data.meaning_cn || '走出低谷、恢复力量'
				};
				
				console.log('成功获取卡牌详情:', this.cardDetail);
				
			} catch (error) {
				console.error('获取卡牌详情失败:', error);
				
				// 使用默认数据
				this.cardDetail = {
					name_cn: '命运指引',
					meaning_cn: '走出低谷、恢复力量'
				};
			} finally {
				this.loadingDetail = false;
			}
		},
		
		// 重新选择
		reselect() {
			if (this.selectedCards.length !== 1) return;
			
			const index = this.selectedCards[0];
			console.log('重新选择，恢复卡牌:', index);
			
			// 使用 $set 确保响应式更新
			this.$set(this.displayCards[index], 'selected', false);
			this.$set(this.displayCards[index], 'flipped', false);
			this.selectedCards = [];
		},
		
		// 重置
		reset() {
			this.shuffling = false;
			this.expanded = false;
			this.showResult = false;
			this.selectedCards = [];
			this.initCards();
		},
		
		// 关闭结果
		closeResult() {
			this.showResult = false;
			this.expanded = false; // 隐藏展开的卡牌布局
			this.selectedCards = []; // 清空选中状态
			this.initCards(); // 重新初始化卡牌，恢复到初始状态
		}
	}
}
</script>

<style scoped>
.tarot-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #2D1B4E 0%, #1a0933 100%);
	position: relative;
	overflow: hidden;
	padding: 40rpx 0;
}

/* 背景装饰 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.star {
	position: absolute;
	width: 4rpx;
	height: 4rpx;
	background: #fff;
	border-radius: 50%;
	animation: twinkle 3s infinite;
	box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
}

@keyframes twinkle {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* 标题区域 */
.header {
	text-align: center;
	margin-bottom: 80rpx;
	position: relative;
	z-index: 10;
}

.title {
	display: block;
	font-size: 56rpx;
	font-weight: bold;
	color: #FFD700;
	text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.5);
	margin-bottom: 20rpx;
}

.subtitle {
	display: block;
	font-size: 28rpx;
	color: #B8A9D4;
}

/* 卡牌区域 */
.cards-area {
	height: 600rpx; /* 恢复合理高度 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-bottom: 80rpx;
	perspective: 1200rpx; /* 增加3D透视 */
}

/* 粒子动画 */
.particles-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
}

.magic-particle {
	position: absolute;
	width: 8rpx;
	height: 8rpx;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 15rpx var(--c);
	animation: particle-fly 0.8s ease-out forwards;
}

@keyframes particle-fly {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--tx), var(--ty)) scale(0);
	}
}

/* 卡牌堆叠 */
.card-stack {
	position: absolute;
	top: 50%; /* 垂直居中 */
	left: 50%; /* 水平居中 */
	transform: translate(-50%, -50%) rotateX(10deg) rotateY(-10deg); /* 居中并保持3D效果 */
	width: 240rpx;
	height: 360rpx;
	transform-style: preserve-3d; /* 保持3D空间 */
	z-index: 20;
}

.stack-card {
	position: absolute;
	left: 0;
	top: 0;
	backface-visibility: visible;
	border: 1px solid #aaa; /* 增加边缘清晰度 */
}

/* 银河/螺旋排列容器 */
.galaxy-container {
	width: 100%;
	height: 100%; /* 占满整个卡牌区域 */
	position: absolute; /* 绝对定位，不占据流式空间 */
	top: 0;
	left: 0;
}

/* 卡牌预览遮罩层 */
.card-preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fade-in 0.3s;
}

.preview-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40rpx;
	animation: slide-up 0.4s;
	margin-top: -300rpx; /* 向上调整位置，使卡牌更好地垂直居中 */
}

.preview-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #FFD700;
	text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.5);
	margin-bottom: 20rpx;
}

.preview-card {
	width: 280rpx;
	height: 448rpx;
	animation: card-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	box-shadow: 0 20rpx 60rpx rgba(255, 215, 0, 0.4);
}

@keyframes card-appear {
	0% {
		transform: scale(0.5) rotateY(90deg);
		opacity: 0;
	}
	100% {
		transform: scale(1) rotateY(0deg);
		opacity: 1;
	}
}



/* 3D Flip Support */
.card-inner {
	width: 100%;
	height: 100%;
	transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
	transform-style: preserve-3d;
	position: relative;
}

.card-inner.is-flipped {
	transform: rotateY(180deg);
}

.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	top: 0;
	left: 0;
	border-radius: 16rpx;
	overflow: hidden;
}

.card-back-face {
	transform: rotateY(0deg);
}

.card-front-face {
	transform: rotateY(180deg);
}

/* 卡牌样式 */
.card {
	width: 200rpx;
	height: 320rpx;
	border-radius: 16rpx;
	position: absolute;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
	transform-origin: center center;
	box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.3);
}

.card-back {
	background: linear-gradient(135deg, #4A148C 0%, #7B1FA2 100%);
	border: 4rpx solid #FFD700;
	box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.3);
}

.card-front {
	background: linear-gradient(135deg, #FFF9E6 0%, #FFE4B5 100%);
	border: 4rpx solid #FFD700;
	box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.5);
}

.card-selected {
	transform: scale(1.1) !important;
	box-shadow: 0 12rpx 40rpx rgba(255, 215, 0, 0.6) !important;
}

.card-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
}

/* 卡牌背面内容 */
.card-back-content {
	position: relative;
}

.card-pattern {
	width: 120rpx;
	height: 120rpx;
	border: 3rpx solid #FFD700;
	border-radius: 50%;
	position: relative;
}

.card-pattern::before,
.card-pattern::after {
	content: '';
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	border: 3rpx solid #FFD700;
	border-radius: 50%;
}

.card-pattern::before {
	top: -10rpx;
	left: 30rpx;
}

.card-pattern::after {
	bottom: -10rpx;
	left: 30rpx;
}

.card-back-text {
	margin-top: 40rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #FFD700;
	letter-spacing: 8rpx;
}

/* 卡牌正面内容 */
.card-front-content {
	background: linear-gradient(135deg, #FFF9E6 0%, #FFE4B5 100%);
	border-radius: 12rpx;
}

.card-img {
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}

.result-card-img {
	width: 100%;
	height: 300rpx;
	border-radius: 8rpx;
}

/* 操作区域 */
.action-area {
	text-align: center;
	position: relative;
	z-index: 10;
	margin-top: 40rpx;
}

.action-btn {
	width: 320rpx; /* 稍微缩小宽度以适应多按钮布局 */
	height: 88rpx;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	font-size: 32rpx;
	font-weight: bold;
	transition: all 0.3s;
}

.action-btn::after {
	border: none;
}

.shuffle-btn {
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	color: #4A148C;
	box-shadow: 0 8rpx 20rpx rgba(255, 215, 0, 0.4);
}

.reset-btn, .reselect-btn {
	background: linear-gradient(135deg, #B8A9D4 0%, #9575CD 100%);
	color: #FFFFFF;
	box-shadow: 0 8rpx 20rpx rgba(149, 117, 205, 0.4);
}

.confirm-btn {
	background: linear-gradient(135deg, #00C853 0%, #64DD17 100%);
	color: #FFFFFF;
	box-shadow: 0 8rpx 20rpx rgba(100, 221, 23, 0.4);
}

.btn-icon {
	font-size: 40rpx;
	margin-right: 16rpx;
}

.shuffling-text {
	font-size: 36rpx;
	color: #FFD700;
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* 提示文字 */
.hint-text {
	text-align: center;
	margin-top: 40rpx;
	font-size: 28rpx;
	color: #B8A9D4;
}

/* 结果弹窗 */
.result-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fade-in 0.3s;
}

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.result-content {
	width: 90%;
	max-width: 600rpx;
	background: linear-gradient(135deg, #FFF9E6 0%, #FFE4B5 100%);
	border-radius: 24rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.5);
	animation: slide-up 0.4s;
}

@keyframes slide-up {
	from {
		transform: translateY(100rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.result-title {
	display: block;
	text-align: center;
	font-size: 40rpx;
	font-weight: bold;
	color: #4A148C;
	margin-bottom: 40rpx;
}

.result-cards {
	margin-bottom: 40rpx;
}

.result-card-item {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.result-card-position {
	display: block;
	font-size: 24rpx;
	color: #7B1FA2;
	margin-bottom: 12rpx;
	text-align: center;
}

.result-card-name {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #4A148C;
	margin-bottom: 16rpx;
}

.result-card-meaning {
	display: block;
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.result-card-description {
	display: block;
	font-size: 28rpx;
	font-weight: 500;
	color: #4A148C;
	margin-top: 20rpx;
	text-align: center;
	line-height: 1.5;
}

.close-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);
	color: #FFFFFF;
	border-radius: 44rpx;
	border: none;
	font-size: 32rpx;
	font-weight: bold;
}

.close-btn::after {
	border: none;
}
</style>
